<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    

    <title>
      H5实名认证 | Memeries for sale 
    </title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
      <meta name="author" content="Qiyue">
    
    

    <meta name="description" content="H5实名认证接到霸道指派任务：做一个非实名升弱实名的公共接口

实际上是为app做一个实名认证的页面和接口。并且可以留作以后他用
页面初步如下：

在新的分支上独立开发。在前端页面显示部分没有什么难度，主要是调用一些写好的组件，再适当调调部分样式，做出来的大概这样子。浏览器中显示的h5页面略有偏差

代码实现具体功能代码实现方面：
mock数据本地server端模拟返回数据：规定返回接口为/h5/">
<meta property="og:type" content="article">
<meta property="og:title" content="H5实名认证 | Memeries for sale">
<meta property="og:url" content="http://yoursite.com/2016/08/23/H5/index.html">
<meta property="og:site_name" content="Memeries for sale">
<meta property="og:description" content="H5实名认证接到霸道指派任务：做一个非实名升弱实名的公共接口

实际上是为app做一个实名认证的页面和接口。并且可以留作以后他用
页面初步如下：

在新的分支上独立开发。在前端页面显示部分没有什么难度，主要是调用一些写好的组件，再适当调调部分样式，做出来的大概这样子。浏览器中显示的h5页面略有偏差

代码实现具体功能代码实现方面：
mock数据本地server端模拟返回数据：规定返回接口为/h5/">
<meta property="og:image" content="http://img.blog.csdn.net/20160809094717859">
<meta property="og:image" content="http://img.blog.csdn.net/20160809094848437">
<meta property="og:image" content="http://img.blog.csdn.net/20160809095530121">
<meta property="og:image" content="http://img.blog.csdn.net/20160809110335970">
<meta property="og:updated_time" content="2016-08-23T08:29:45.590Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="H5实名认证 | Memeries for sale">
<meta name="twitter:description" content="H5实名认证接到霸道指派任务：做一个非实名升弱实名的公共接口

实际上是为app做一个实名认证的页面和接口。并且可以留作以后他用
页面初步如下：

在新的分支上独立开发。在前端页面显示部分没有什么难度，主要是调用一些写好的组件，再适当调调部分样式，做出来的大概这样子。浏览器中显示的h5页面略有偏差

代码实现具体功能代码实现方面：
mock数据本地server端模拟返回数据：规定返回接口为/h5/">
<meta name="twitter:image" content="http://img.blog.csdn.net/20160809094717859">
    
    
    
      <link rel="icon" type="image/x-icon" href="/favicon.png">
    
    <link rel="stylesheet" href="/css/uno.css">
    <link rel="stylesheet" href="/css/highlight.css">
    <link rel="stylesheet" href="/css/archive.css">
    <link rel="stylesheet" href="/css/china-social-icon.css">

</head>
<body>

    <span class="mobile btn-mobile-menu">
        <i class="icon icon-list btn-mobile-menu__icon"></i>
        <i class="icon icon-x-circle btn-mobile-close__icon hidden"></i>
    </span>

    

<header class="panel-cover panel-cover--collapsed">


  <div class="panel-main">

  
    <div class="panel-main__inner panel-inverted">
    <div class="panel-main__content">

        

        <h1 class="panel-cover__title panel-title"><a href="/" title="link to homepage">Memeries for sale</a></h1>
        <hr class="panel-cover__divider" />

        
        <p class="panel-cover__description">
          Crazier-qi
        </p>
        <hr class="panel-cover__divider panel-cover__divider--secondary" />
        

        <div class="navigation-wrapper">

          <nav class="cover-navigation cover-navigation--primary">
            <ul class="navigation">

              
                
                <li class="navigation__item"><a href="/#blog" title="" class="blog-button">首页</a></li>
              
                
                <li class="navigation__item"><a href="/about" title="" class="">关于</a></li>
              
                
                <li class="navigation__item"><a href="/archive" title="" class="">归档</a></li>
              

            </ul>
          </nav>

          <!-- ----------------------------
To add a new social icon simply duplicate one of the list items from below
and change the class in the <i> tag to match the desired social network
and then add your link to the <a>. Here is a full list of social network
classes that you can use:

    icon-social-500px
    icon-social-behance
    icon-social-delicious
    icon-social-designer-news
    icon-social-deviant-art
    icon-social-digg
    icon-social-dribbble
    icon-social-facebook
    icon-social-flickr
    icon-social-forrst
    icon-social-foursquare
    icon-social-github
    icon-social-google-plus
    icon-social-hi5
    icon-social-instagram
    icon-social-lastfm
    icon-social-linkedin
    icon-social-medium
    icon-social-myspace
    icon-social-path
    icon-social-pinterest
    icon-social-rdio
    icon-social-reddit
    icon-social-skype
    icon-social-spotify
    icon-social-stack-overflow
    icon-social-steam
    icon-social-stumbleupon
    icon-social-treehouse
    icon-social-tumblr
    icon-social-twitter
    icon-social-vimeo
    icon-social-xbox
    icon-social-yelp
    icon-social-youtube
    icon-social-zerply
    icon-mail

-------------------------------->

<!-- add social info here -->



<nav class="cover-navigation navigation--social">
  <ul class="navigation">

    
      <!-- Github -->
      <li class="navigation__item">
        <a href="https://github.com/Crazier-qi" title="Huno on GitHub">
          <i class='icon icon-social-github'></i>
          <span class="label">GitHub</span>
        </a>
      </li>
    

    <!-- China social icon -->
    <!--
    
      <li class="navigation__item">
        <a href="" title="">
          <i class='icon cs-icon-douban'></i>
          <span class="label">Douban</span>
        </a>
      </li>

      <li class="navigation__item">
        <a href="" title="">
          <i class='icon cs-icon-weibo'></i>
          <span class="label">Weibo</span>
        </a>
      </li>

    -->



  </ul>
</nav>



        </div>

      </div>

    </div>

    <div class="panel-cover--overlay"></div>
  </div>
</header>

    <div class="content-wrapper">
        <div class="content-wrapper__inner entry">
            

<article class="post-container post-container--single">

  <header class="post-header">
    
    <h1 class="post-title">H5实名认证</h1>

    

    <div class="post-meta">
      <time datetime="2016-08-23" class="post-meta__date date">2016-08-23</time> 

      <span class="post-meta__tags tags">

          
            <font class="categories">
            &#8226; 分类:
            <a class="categories-link" href="/categories/project/">project</a>
            </font>
          

          
             &#8226; 标签:
            <font class="tags">
              <a class="tags-link" href="/tags/实名认证，server访问/">实名认证，server访问</a>
            </font>
          

      </span>
    </div>
    
    

  </header>

  <section id="post-content" class="article-content post">
    <h3 id="H5实名认证"><a href="#H5实名认证" class="headerlink" title="H5实名认证"></a>H5实名认证</h3><p>接到霸道指派任务：做一个<strong>非实名升弱实名的公共接口</strong></p>
<p><img src="http://img.blog.csdn.net/20160809094717859" alt="这里写图片描述"></p>
<p>实际上是为app做一个实名认证的页面和接口。并且可以留作以后他用</p>
<p>页面初步如下：</p>
<p><img src="http://img.blog.csdn.net/20160809094848437" alt="这里写图片描述"></p>
<p>在新的分支上独立开发。<br>在前端页面显示部分没有什么难度，主要是调用一些写好的组件，再适当调调部分样式，做出来的大概这样子。<br><strong>浏览器中显示的h5页面略有偏差</strong></p>
<p><img src="http://img.blog.csdn.net/20160809095530121" alt="这里写图片描述"></p>
<h3 id="代码实现"><a href="#代码实现" class="headerlink" title="代码实现"></a>代码实现</h3><p><strong>具体功能代码实现方面：</strong></p>
<h4 id="mock数据"><a href="#mock数据" class="headerlink" title="mock数据"></a>mock数据</h4><p>本地server端模拟返回数据：<br>规定返回接口为/h5/op_check_if_jump.json<br>返回code码“000000”为成功<br>测试错误信息存在resultMsg中<br>还可能存在其他数据，本地只做测试因此未指明<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">router.post(&quot;/op_check_if_jump.json&quot;,function(req,res)&#123;</div><div class="line">   var reqBody = req.body;</div><div class="line">    base.apiOkOutput(res, &#123;</div><div class="line">        resultCode: &quot;000000&quot;, //成功返回码</div><div class="line">        resultMsg: &quot;测试错误信息&quot;, //返回结果</div><div class="line">    &#125;);</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<h4 id="调用接口"><a href="#调用接口" class="headerlink" title="调用接口"></a>调用接口</h4><p>接下来servies请求调用后台接口：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">getCheckJump:function(myForm)&#123;//入参</div><div class="line">                var reqData = this.getRequestData(&#123;</div><div class="line">                    id:myForm.id,</div><div class="line">                    name:myForm.name,</div><div class="line">                    identity:myForm.identity</div><div class="line">                &#125;);//請求的数据</div><div class="line">                return this.postRequest(&quot;/h5/op_check_if_jump.json?v=&quot; + Math.random(), reqData, function(result)&#123;</div><div class="line">                    return result;</div><div class="line">                &#125;);</div><div class="line">            &#125;//请求后台判断接口</div></pre></td></tr></table></figure>
<p>在这里将注册id和姓名和身份证号作为入参传递给后台做统一处理，再返回成功与否的结果。getRequestData（）是获取入参。并且用变量reqdata存起来。postRequest（）则时向服务端发起请求。+Math。random（）添加随机数，防止缓存。function（result）回调函数返回结果result。</p>
<h3 id="view层"><a href="#view层" class="headerlink" title="view层"></a>view层</h3><p>页面点击下一步触发事件代码view层：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">&lt;div class=&quot;container tonext&quot;&gt;</div><div class="line">            &lt;button class=&quot;btn btn-primary&quot; ng-click=&quot;goToStep(&apos;myForm&apos;)&quot; ng-disabled=&quot;myForm.$invalid&quot;&gt;下一步&lt;/button&gt;</div><div class="line">        &lt;/div&gt;</div></pre></td></tr></table></figure>
<h3 id="controller层"><a href="#controller层" class="headerlink" title="controller层"></a>controller层</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">$scope.goToStep = function(myForm) &#123;</div><div class="line">            var id = &quot;1234&quot;;</div><div class="line">            var name = &quot;qiyue&quot;;</div><div class="line">            var identity = &quot;123456789098765&quot;;</div><div class="line">            RealNameService.getCheckJump(myForm).then(function(result)&#123;</div><div class="line">                if(result.code === &quot;000000&quot;)&#123;</div><div class="line">                    //带url的页面跳转</div><div class="line">                   location.href = $stateParams.successUrl; </div><div class="line">                &#125;</div><div class="line">                else &#123;</div><div class="line">                    helper.handleError(result.message, false, result.code);</div><div class="line">                &#125;</div><div class="line">            &#125;, function(result) &#123;</div><div class="line">                helper.handleError(result.message, false);</div><div class="line">                &#125;);</div><div class="line">        &#125;;</div></pre></td></tr></table></figure>
<blockquote>
<p>首先要注意一点就是在controller层中用到的封装好的方法是需要注入的。例如这里的<strong>RealNameService、</strong>以及后续用到的出错处理、弹窗、路由参数<strong>helper、dialog、stateParams</strong>等。</p>
</blockquote>
<p>当请求成功并且返回resultcode为六个0时会跳转至相应页面。</p>
<h3 id="页面跳转"><a href="#页面跳转" class="headerlink" title="页面跳转"></a>页面跳转</h3><p><strong>当进入认证页面时就会带相应的URL</strong><br>即上一个页面的URL参数，因此在路由配置处添加如下代码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">.state(&apos;RealName&apos;, &#123;</div><div class="line">                url: &apos;/RealName?backUrl&amp;successUrl&apos;,</div><div class="line">                templateUrl: __uri(&apos;../../views/RealName.html&apos;)</div><div class="line">            &#125;)</div></pre></td></tr></table></figure>
<p>配置backUrl和successUrl。当页面请求成功时利用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">location.href = $stateParams.successUrl;</div></pre></td></tr></table></figure>
<p>获取跳转地址，实现页面跳转。<br>backUrl为返回按钮的返回页面</p>
<p><img src="http://img.blog.csdn.net/20160809110335970" alt="这里写图片描述"></p>
<p>当请求成功但是返回错误信息时走else分支<br>当请求失败，调用回调函数走function（result）分支</p>

  </section>

  

<section class="post-comments">
  <div id="disqus_thread"></div>
  <script type="text/javascript">
      var disqus_shortname = 'letian'; 
      /* * * DON'T EDIT BELOW THIS LINE * * */
      (function() {
          var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
          dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>


  
</article>


            <footer class="footer">

    <span class="footer__copyright">&copy; 2016 | 由<a href="https://hexo.io/">Hexo</a>强力驱动 | 主题<a href="https://github.com/someus/huno">Huno</a></span>
    
</footer>
        </div>
    </div>

    <!-- js files -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/scale.fix.js"></script>
    

    

    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
            MathJax.Hub.Config({ 
                tex2jax: {inlineMath: [['[latex]','[/latex]'], ['\\(','\\)']]} 
            });
        });
    </script>


    

    <script src="/js/awesome-toc.min.js"></script>
    <script>
        $(document).ready(function(){
            $.awesome_toc({
                overlay: true,
                contentId: "post-content",
            });
        });
    </script>


    
    
    <!--kill ie6 -->
<!--[if IE 6]>
  <script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
<![endif]-->

</body>
</html>
